<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta content="telephone=no" name="format-detection">
<link rel="stylesheet" href="css/souindex.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1465803036_4967518.css">
<title>堂</title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/browser.min.js"></script>
</head>
<body>
<div class="allWrap ub ub-ver" id="main">
    <div class="header">
    	<div class="header-top ub">
        	<div class="header-logo ub-f1">
            	<img src="images/搜房网_02.jpg">
            </div>
            <div class="header-admin ub">
            <i  class="iconfont icon-xiazai"></i>
             app下载
            <i class="iconfont icon-yonghu"></i>
            </div>
        </div>
        <div class="header-search ub">
        	<div class="searchk ub-f1">
                <div class="searchk-add">南宁<i class="iconfont icon-arrows-copy"></i>
                <span></span>
                <input class="searchk-input ub-f1" type="text" placeholder="楼盘名/地铁/房产百科等" /></div>
            	
            	
            </div>
            <div class="addfang ub">
            <a>地图找房</a></div>
        </div>
    </div>
    
    <div class="ad">
    	<img src="images/nav.jpg " width="100%" height="100%">
    </div>
    <div class="content">
            <div class="nav">
        
            <div class="navline1 ub ub-ac">
                <a class="navli ub-f1"> 
                <p class="navlogo1"></p>
                <p  class="p1">买新房</p>
                </a>
                <a class="navli ub-f1"> 
                <p class="navlogo2"></p>
                <p class="p1">买二手房</p>
                </a>
                <a class="navli ub-f1"> 
                <p class="navlogo3"></p>
                <p class="p1">找租房</p>
                </a>
                <a class="navli ub-f1 "> 
                <p class="navlogo4 "></p>
                <p class="p1">装修</p>
                </a>
                <a class="navli ub-f1"> 
                <p class="navlogo5"></p>
                <p class="p1">自营</p>
                </a>
            
            </div>
            <div class="navli2 ub ub-ac">
                <a class="navli ub-f1"> 
                <p class="navlogo6"></p>
                <p class="p1">查房价</p>
                </a>
                <a class="navli ub-f1"> 
                <p class="navlogo7"></p>
                <p class="p1" >我要卖房</p>
                </a>
                <a class="navli ub-f1"> 
                <p class="navlogo8"></p>
                <p class="p1">我要出租</p>
                </a>
                <a class="navli ub-f1"> 
                <p class="navlogo9"></p>
                <p class="p1">优质学区</p>
                </a>
                <a class="navli ub-f1"> 
                <p class="navlogo10"></p>
                <p class="p1" >更多</p>
                </a>
            </div>
          <div class="hr"><br /></div>
          <div class="chuxiaoxinxi">
                <div class="cxline1 ub ub-ac">
                    <div class="cx1 flex1 ub-f1">
                        <div class="cxleft ub">
                            <h3 class="cx1title flex1">低价来袭</h3>
                            <span class="cximg"><img src="images/45x45 (1).jpg"></span>
                        </div>
                        <div class="bottom ub">
                            <div class="cxinfo flex1" >地价催涨房价</div>
                        </div>
                    </div>
                    <div class="cx2 flex1 ub-f1">
                        <div class="cxleft ub">
                            <h3 class="cx1title flex1">凤岭北好房</h3>
                            <span class="cximg"><img src="images/45x45.jpg"></span>
                        </div>
                        <div class="bottom ub">
                            <div class="cxinfo flex1" >实用两房带大露台</div>
                        </div>
                    </div>
                </div>
                 <div class="cxline2 ub ub-ac">
                    <div class="cx3 flex1 ub-f1">
                        <div class="cxleft ub">
                            <h3 class="cx1title flex1">合租免佣房</h3>
                            <span class="cximg"><img src="images/45x45 (2).jpg" ></span>
                        </div>
                        <div class="bottom ub">
                            <div class="cxinfo flex1" >单间360元起</div>
                        </div>
                    </div>
                    <div class="cx4 flex1 ub-f1">
                        <div class="cxleft ub">
                            <h3 class="cx1title flex1">小户型开挂</h3>
                            <span class="cximg"><img src="images/45x45 (3).jpg"></span>
                        </div>
                        <div class="bottom ub">
                            <div class="cxinfo flex1" >三种方案任选</div>
                        </div>
                    </div>
                </div>
            </div> 
            <div class="hr"><br /></div>
            <div class="xihuan ">
            	<div class="xhtop ub ub-ac" id="main-in">
                    <div class="xhtleft ub-f1">猜你喜欢</div>
                    <div class="xhtright ub">...</div>
                </div>
               <!--  <div class="xhcontent ub ub-ac" >
                   <div class="contimg ">
                       <img src="images/120x120(1).jpg">
                   </div>
                   <div class="conttext flex1">
                       <h3 class="text1">瀚林锦城</h3> 
                       <p class="text2 ">西乡塘</p>
                       <p class="text2">西乡塘-新阳路塔 普通住宅 毛坯</p>
                       <div class="contspan">
                           <span>塔楼</span>
                           <span>普通住宅</span>
                           <span>毛胚</span>
                       </div>
                       
                   </div>
                   <div class="contright ub">
                   <span class="jiage">价格待定</span>
                   </div>
                           </div>
                           <div class="hr2"></div>
                           <div class="xhcontent ub ub-ac" >
                   <div class="contimg ">
                       <img src="images/120x120(1).jpg">
                   </div>
                   <div class="conttext flex1">
                       <h3 class="text1">瀚林锦城</h3> 
                       <p class="text2 ">西乡塘</p>
                       <p class="text2">西乡塘-新阳路塔 普通住宅 毛坯</p>
                       <div class="contspan">
                           <span>塔楼</span>
                           <span>普通住宅</span>
                           <span>毛胚</span>
                       </div>
                       
                   </div>
                   <div class="contright ub">
                   <span class="jiage">价格待定</span>
                   </div>
                           </div>
                           <div class="hr2"></div>
                           <div class="xhcontent ub ub-ac" >
                   <div class="contimg ">
                       <img src="images/120x120(1).jpg">
                   </div>
                   <div class="conttext flex1">
                       <h3 class="text1">瀚林锦城</h3> 
                       <p class="text2 ">西乡塘</p>
                       <p class="text2">西乡塘-新阳路塔 普通住宅 毛坯</p>
                       <div class="contspan">
                           <span>塔楼</span>
                           <span>普通住宅</span>
                           <span>毛胚</span>
                       </div>
                       
                   </div>
                   <div class="contright ub">
                   <span class="jiage">价格待定</span>
                   </div>
                           </div>
                           <div class="hr2"></div>
                           <div class="xhcontent ub ub-ac" >
                   <div class="contimg ">
                       <img src="images/120x120(1).jpg">
                   </div>
                   <div class="conttext flex1">
                       <h3 class="text1">瀚林锦城</h3> 
                       <p class="text2 ">西乡塘</p>
                       <p class="text2">西乡塘-新阳路塔 普通住宅 毛坯</p>
                       <div class="contspan">
                           <span>塔楼</span>
                           <span>普通住宅</span>
                           <span>毛胚</span>
                       </div>
                       
                   </div>
                   <div class="contright ub">
                   <span class="jiage">价格待定</span>
                   </div>
                           </div>
                           <div class="hr2"></div>
                           <div class="xhcontent ub ub-ac" >
                   <div class="contimg ">
                       <img src="images/120x120(1).jpg">
                   </div>
                   <div class="conttext flex1">
                       <h3 class="text1">瀚林锦城</h3> 
                       <p class="text2 ">西乡塘</p>
                       <p class="text2">西乡塘-新阳路塔 普通住宅 毛坯</p>
                       <div class="contspan">
                           <span>塔楼</span>
                           <span>普通住宅</span>
                           <span>毛胚</span>
                       </div>
                       
                   </div>
                   <div class="contright ub">
                   <span class="jiage">价格待定</span>
                   </div>
                           </div> -->
            <div id="example"></div>
            <div class="xhbunt ub ub-ac">
            	<div class="huan ub-f1">换一换</div>
                <div class="gen  ub-f1">更多</div>
            
            </div>
	</div>
    <div class="hr"></div>
          
          
  
                
            </div>
            
            
        </div>
     <div class="footer ub ub-ac">
	<div class="menu-1 active flex1"><a class="footerx">x</a>
    </div>
	<div class="menu-2 ub"><span class="dow">立即下载</span></div>
	
    </div>
</div>
<script id="tel" type="text/html">

<% for(var i in data){ %>
			<div class="xhcontent ub ub-ac" id="xhcontent">
                <div class="contimg">
                	<img src="<%=data[i].img%>" />
                </div>
                <div class="conttext ">
                	<h3 class="text1"><%=data[i].title%></h3> 
                    <p class="text2 flex1"><%=data[i].add%></p>
                    <p class="text2"><%=data[i].adddetails%></p>
                    <div class="contspan">
                        <span><%=data[i].span1%></span>
                        <span><%=data[i].span2%></span>
                        <span><%=data[i].span3%></span>
                    </div>
                    
                </div>
                <div class="contright ub">
                <span class="jiage"><%=data[i].jiage%></span>
                </div>
                
            </div>
            <div class="hr2"></div>

	<%}%>
</script>

<!--
<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript" src="js/require_conf.js"></script>
<script type="text/javascript">
	
    require(['../site/index']);
	</script>
    -->	
  <script type="text/babel">

    var res=[
        {title:'我是数据1'},
        {title:'我是数据2'},
        {title:'我是数据3'},
        {title:'我是数据4'},
        {title:'我是数据5'}
    ]

    var List=React.createClass({
        getDefaultProps:function(){
          return {
            loading:true
          };
        },
        getInitialState: function() {
          return {
                loading:false,
                arr:[],
            };
        },
        componentWillMount:function(){
          this.getData();
        },
        componentDidMount:function() {
     
            window.addEventListener('scroll',this.handleScroll);
        },
        handleScroll:function(e) {
 
            var _this=this;
            if($(document).height()-$(window).scrollTop()<$(window).height()+10){
                if(!this.state.loading){
                    _this.setState({loading:true,txt:"正在加载中..."});
                    this.getData();
                }
                
            }
        },
        getData:function(){
            var arrNew=this.state.arr;
            arrNew=arrNew.concat(res);
            this.setState({arr:arrNew});
        },
        componentWillUnmount:function() {

            window.removeEventListener('scroll', this.handleScroll);
        },
        addData:function(){
            var arrNew=this.state.arr;
            arrNew=arrNew.concat(res);
            this.setState({arr:arrNew});
        },
        render: function() {
            return ( 
                <div>
                {this.state.arr.map(function(obj,idx){
                    return(
                      <div key={idx}>  
                        <div className="xhcontent ub ub-ac">
                            <div className="contimg ">
                                <img src="/images/120x120(1).jpg" />
                            </div>
                            <div className="conttext flex1">
                                <h3 className="text1">{obj.title}</h3> 
                                <p className="text2 ">西乡塘</p>
                                <p className="text2">西乡塘-新阳路塔 普通住宅 毛坯</p>
                                <div className="contspan">
                                    <span>塔楼</span>
                                    <span>普通住宅</span>
                                    <span>毛胚</span>
                                </div>
                                
                            </div>
                            <div className="contright ub">
                            <span className="jiage">价格待定</span>
                            </div>
                        </div>
                        <div className="hr2"></div>
                        </div>
                    )
                },this)}
                    <div onClick={this.addData}>查看更多</div>
                </div>
            )
        }   
    })


	React.render(
      <List />,
      document.getElementById('example')
    );
  </script>
</body>
</html>
